<template>
  <div>
    <div class="directorys-container">
      <el-card class="box-card">
        <el-row>
          <el-col style="width: 75%">
            <el-form
              :inline="true"
              class="demo-form-inline"
            >
              <el-form-item label="目录名称">
                <el-input v-model="Query.directoryName" ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="Query.state" placeholder="请选择" >
                  <el-option label="启用" value=1></el-option>
                  <el-option label="禁用" value=0></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="resetForm" size="small"
                  >清除</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                type="primary"
                @click="onSubmit"
                size="small">
                查询
              </el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col style="width: 25%; text-align: right">
            <el-row>
              <el-button type="success" icon="el-icon-edit" size="small" @click="update">新增目录</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-alert type="info" show-icon>
          数据一共 {{ pageInfo.total }} 条
        </el-alert>
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column property="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column property="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column property="username" label="创建者">
          </el-table-column>
          <el-table-column property="addDate" label="创建日期">
          </el-table-column>
          <el-table-column property="totals" label="面试题数量">
          </el-table-column>
          <el-table-column property="state" label="状态">
            <template v-slot="{ row }">
              {{ row.state ? "已启用" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button @click="dirChange(row)" type="text" size="medium">
                <span v-if="row.state == 0">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button
                type="text"
                size="medium"
                @click="update(row.id)"
                :disabled="!!row.state"
              >
                修改
              </el-button>
              <el-button
                @click="deleteRow(row.id)"
                type="text"
                :disabled="!!row.state"
                size="medium"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-row type="flex" class="row-bg" justify="end">
            <el-pagination
            background
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageInfo.pageSize"
            @current-change="pageChanged"
            @size-change="sizeChanged"
            layout="sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
          </el-pagination>
          </el-row>
        </div>
      </el-card>
    </div>
    <directorys-add
      :showUpdate.sync="showUpdate"
      ref="sonForm" :title="revise ? '修改目录' : '新增目录'">
    </directorys-add>
  </div>
</template>

<script>
import { list as dieList, changeState, detail, remove } from '../../api/hmmm/directorys'
import directorysAdd from '../components/directorys-add.vue'
export default {
  components: { directorysAdd },
  data () {
    return {
      directoryName: undefined,
      state: undefined,
      form: {
       
      },
      // formLabelWidth: '120px',
      // dialogFormVisible: false,
      showUpdate: false,
      tableData: [],
      pageInfo: {
        total: 0,
        pageSize: 10
      },
      Query: {
        page: 1,
        pagesize: 10
      },
      revise: true
    }
  },
  created () {
    this.getTableData()
  },

  methods: {
    // 查询
   onSubmit () {
      this.Query.page = 1
      console.log(this.state);
      const res = this.getTableData()
      console.log(res);
      
      // this.formInline.user = 
      // this.formInline.region = 
    },
    //修改分页大小
    sizeChanged (size) {
      this.Query.pagesize = size
      this.getTableData()
      this.Query.page = 1
     },
    //跳转分页
    pageChanged (page) { 
      this.Query.page = page;
      this.getTableData();
    },
    // 清除
    resetForm () {
      // $options.data()固定方法
      // console.log(this.$options.data())
      // this.directoryName = this.$options.data().directoryName
      // this.state = this.$options.data().state
      this.Query = {
        page: 1,
        pagesize:10
      }
      this.getTableData()
    },
    async deleteRow (id) {
      const res = await remove({ id })
      // console.log(res)
      this.getTableData()
    },
    open () {
      this.opening = true
    },
    //修改
    async update (id) {
      this.showUpdate = true
      const { data } = await detail({ id })
      // console.log(data)
      if (data.id) {
        // console.log(data)
        this.$refs.sonForm.form = data
        this.revise = true
      } else {
        this.revise = false
      }
    },
    // 状态展示
    async getTableData () {
      const { data } = await dieList(this.Query)
      // console.log(data)
      let { counts, pagesize, page } = data;
      this.pageInfo.total = counts;
      this.pageInfo.pageSize = Number(pagesize);
      this.tableData = data.items
    },
    // 启用、禁用
    async dirChange (val) {
      let data = {
        id: val.id,
        state: val.state
      }
      if (val.state) {
        data.state = 0
      } else {
        data.state = 1
      }
      await changeState(data)
      this.$message({
          message: '操作成功',
          type: 'success'
      })
      this.getTableData(this.Query)
    }
  }
}
</script>

<style scoped lang='scss'>
.directorys-container {
  padding: 10px;

  ::v-deep.el-form-item__label {
    width: 80px;
    height: 32px;
  }

  ::v-deep.el-card .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
}
</style>
